<template>
  <div class="not-found-page">
    <div class="error-container">
      <div class="error-content">
        <h1 class="error-code">404</h1>
        <h2 class="error-title">页面未找到</h2>
        <p class="error-message">您访问的页面不存在或已被移除，请检查URL是否正确</p>
        <div class="action-buttons">
          <router-link to="/" class="home-button">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
              />
            </svg>
            返回首页
          </router-link>
          <button class="search-button" @click="goToSearch">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
              />
            </svg>
            搜索商品
          </button>
        </div>
        <div class="additional-links">
          <a href="#" @click.prevent="goBack">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
              />
            </svg>
            返回上一页
          </a>
          <a href="mailto:support@example.com">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="14"
              height="14"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path
                d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"
              />
            </svg>
            联系客服
          </a>
        </div>
      </div>
      <div class="error-image">
        <img src="@/assets/images/404-error.svg" alt="404错误页面" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goToSearch = () => {
  router.push('/product/search')
}

const goBack = () => {
  router.go(-1)
}
</script>

<style scoped lang="scss">
.not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

  .error-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    gap: 60px;
    background: white;
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .error-content {
    flex: 1;
    max-width: 500px;

    .error-code {
      font-size: 100px;
      font-weight: 800;
      color: var(--primary-color);
      margin-bottom: 20px;
      line-height: 1;
      background: linear-gradient(to right, var(--primary-color), #6c5ce7);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .error-title {
      font-size: 36px;
      margin-bottom: 16px;
      color: #2d3436;
      font-weight: 700;
    }

    .error-message {
      font-size: 18px;
      color: #636e72;
      margin-bottom: 32px;
      line-height: 1.6;
    }

    .action-buttons {
      display: flex;
      gap: 16px;
      margin-bottom: 30px;

      .home-button,
      .search-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      }

      .home-button {
        background-color: var(--primary-color);
        color: white;
        border: none;

        &:hover {
          background-color: var(--primary-dark-color);
          transform: translateY(-2px);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
      }

      .search-button {
        background-color: white;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);

        &:hover {
          background-color: #f0f7ff;
          transform: translateY(-2px);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .additional-links {
      display: flex;
      gap: 20px;
      font-size: 14px;

      a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #636e72;
        text-decoration: none;
        transition: color 0.2s;

        &:hover {
          color: var(--primary-color);
          text-decoration: underline;
        }
      }
    }
  }

  .error-image {
    flex: 1;
    display: flex;
    justify-content: center;
    animation: float 6s ease-in-out infinite;

    img {
      max-width: 100%;
      height: auto;
      max-height: 400px;
    }
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

@media (max-width: 992px) {
  .error-container {
    padding: 40px !important;
  }
}

@media (max-width: 768px) {
  .error-container {
    flex-direction: column;
    gap: 40px !important;
    text-align: center;
    padding: 30px !important;
  }

  .action-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .additional-links {
    justify-content: center;
  }

  .error-code {
    font-size: 80px !important;
  }

  .error-title {
    font-size: 28px !important;
  }

  .error-message {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .error-container {
    padding: 20px !important;
  }
}
</style>
